<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>超市订单管理系统</title>
    <link rel="icon" href="../img/logo.png" type="image/x-icon">
    <!-- 字体图标样式 -->
    <link rel="stylesheet" href="../css/iconfont.css">
    <!-- 引入layui核心样式 -->
    <link rel="stylesheet" href="../lib/layui/css/layui.css"/>
    <link rel="stylesheet" href="../css/home.css">
    <!-- 引入layui核心JS -->
    <script src="../lib/layui/layui.js"></script>
</head>
<body>
<!-- 整个页面容器 -->
<div class="layui-layout layui-layout-admin">
    <!-- 头部区域 -->
    <div class="layui-header layui-bg-blue">
        <!-- 头部区域的logo和系统名称 -->
        <div class="layui-logo layui-hide-xs">
            <i class="iconfont icon-chaoshi"></i>
            超市订单管理系统
        </div>
        <!-- 头部区域的左侧菜单 -->
        <ul class="layui-nav layui-layout-left">

        </ul>
        <!-- 头部区域右侧头像区域 -->
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                <a href="javascript:;">
                    <img id="avatar" src="../img/avatar.jpg" alt="" class="layui-nav-img">
                </a>
                <dl class="layui-nav-child">
                    <dd>
                        <a href="javascript:;" lay-on="avatar">
                            <i class="iconfont icon-shangchuantouxiang"></i>
                            上传头像
                        </a>
                    </dd>
                    <dd>
                        <a href="javascript:;" lay-on="setting">
                            <i class="iconfont icon-gerenzhongxin"></i>
                            更新资料
                        </a>
                    </dd>
                    <dd>
                        <a href="javascript:;" lay-on="updatePassword">
                            <i class="iconfont icon-xiugaimima"></i>
                            修改密码
                        </a>
                    </dd>
                    <dd>
                        <a href="javascript:;" lay-on="logout">
                            <i class="iconfont icon-tuichu"></i>
                            退出登录
                        </a>
                    </dd>
                </dl>
            </li>
        </ul>
    </div>
    <!-- 左侧菜单 -->
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-this">
                    <a class="" href="javascript:;" data-page="default/default">
                        <i class="iconfont icon-zhuye"></i>
                        主页
                    </a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;" data-page="order/order">
                        <i class="iconfont icon-dingdan"></i>
                        订单管理
                    </a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;" data-page="provider/provider">
                        <i class="iconfont icon-gongyingshang"></i>
                        供应商管理
                    </a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;" data-page="user/user">
                        <i class="iconfont icon-yonghu"></i>
                        用户管理
                    </a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;" data-page="role/role">
                        <i class="iconfont icon-jiaoseguanli"></i>
                        角色管理
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 右侧的内容区域 -->
    <div class="layui-body">
        <div class="layui-tab layui-tab-card" lay-filter="menuTab" lay-allowclose="true">
            <ul class="layui-tab-title">
                <li class="layui-this" lay-id="default/default">
                    主页
                </li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show" lay-id="default/default">
                    <iframe src="default/default.html"></iframe>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部信息区域 -->
    <div class="layui-footer layui-font-blue layui-font-20">
        <!-- 底部固定区域 -->
        超市订单管理系统
    </div>
</div>
</body>
<script>
    // 获取Layui的内置模块
    let $ = layui.$
    let element = layui.element
    let util = layui.util
    let layer = layui.layer

    // 相当于初始化方法
    layui.use(function(){
        initMenuClick()
        initTabChange()
        utilEvent()
        checkLogin()
        getAvatar()
    })

    /**
     * 登录检测，每隔30秒检测是否还登录着，已经退出则跳转回登录页
     */
    function checkLogin() {
        setInterval(function () {
            $.get('/soms/server/auth?type=loginInfo', function (result) {
                if (result.code === 401) {
                    location.href = '../no_auth.html'
                }
            })
        }, 1000 * 30)
    }

    /**
     * 获取登录用户的头像
     */
    function getAvatar() {
        $.get('/soms/server/user?type=getAvatar', function (result) {
            if (result.code === 200) {
                $('#avatar').attr('src', result.data)
            } else if (result.code === 401) {
                location.href = '../no_auth.html'
            }
        })
    }

    /**
     * 初始化左侧菜单每一项的点击事件
     */
    function initMenuClick() {
        $('.layui-nav-tree>.layui-nav-item>a').click(function() {
            // 获取选项卡的标题，即a标签中的文本
            // this代表的就是被点击的a标签
            let title = $(this).text().trim()
            // 获取选项卡的iframe地址
            let data_page = $(this).attr('data-page')
            // 判断是否已经存在了这个tab选项卡
            // 获取现有的tab选项卡
            let tabs = $('.layui-tab>.layui-tab-title>li')
            for (let i = 0; i < tabs.length; i++) {
                // a标签的data-page跟每一项tab的lay-id比较
                if (tabs.eq(i).attr('lay-id') === data_page) {
                    // 已经存在
                    // 切换tab
                    element.tabChange('menuTab', data_page)
                    // 结束点击事件的方法
                    return
                }
            }

            // 如果还不存在，那就新增一个tab选项卡
            element.tabAdd('menuTab', {
                title: title,
                content: "<iframe src='" + data_page + ".html'></iframe>",
                id: data_page,
                change: true
            })
        })
    }

    /**
     * 初始化Tab标签的变化事件，包括主动切换和主动删除
     */
    function initTabChange() {
        // 删除之前
        // 防止主页被关闭
        element.on('tabBeforeDelete(menuTab)', function(data) {
            if (data.id === 'default/default') {
                return false
            }
        })

        // 删除之后
        // tab 删除事件
        element.on('tabDelete(menuTab)', function(data) {
            // 查到删除之后选中的tab，通过class='layui-this'
            let selected_lay_id = $('.layui-tab-title>li.layui-this').attr('lay-id')
            // 取消所有的左侧菜单项的选中状态
            $('.layui-nav-tree>.layui-nav-item').removeClass('layui-this')
            // 通过selected_lay_id找到左侧需要切换的菜单
            $(".layui-nav-tree>.layui-nav-item>a[data-page='" + selected_lay_id + "']")
                .parent().addClass('layui-this')
        })

        // 切换之后
        element.on('tab(menuTab)', function(data) {
            // 切换目标的lay-id
            // console.log(data.id)
            // 取消所有的左侧菜单项的选中状态
            $('.layui-nav-tree>.layui-nav-item').removeClass('layui-this')
            // 通过selected_lay_id找到左侧需要切换的菜单
            $(".layui-nav-tree>.layui-nav-item>a[data-page='" + data.id + "']")
                .parent().addClass('layui-this')
        })
    }

    /**
     * 批量定义事件
     */
    function utilEvent() {
        util.on('lay-on', {
            'avatar': function () {
                layer.open({
                    type: 2,
                    title: '修改头像',
                    area: ['240px', '320px'],
                    closeBtn: 0,
                    shadeClose: true,
                    content: ['personal/avatar.html', 'no']
                })
            },
            'setting': function () {
                layer.open({
                    type: 2,
                    title: '更新资料',
                    area: ['440px', '560px'],
                    maxmin: true,
                    content: ['personal/setting.html', 'no']
                })
            },
            'updatePassword': function () {
                layer.open({
                    type: 2,
                    title: '修改密码',
                    area: ['440px', '330px'],
                    maxmin: true,
                    content: ['personal/updatePassword.html', 'no']
                })
            },
            'logout': logout
        })
    }

    /**
     * 退出登录
     */
    function logout() {
        $.get('/soms/server/auth?type=logout', function (result) {
            location.href = '../no_auth.html'
        })
    }
</script>
</html>